<template>
  <div>
    <van-nav-bar :title="title" v-if="navBarShow" fixed>
      <template #left v-if="flag">
        <van-icon name="arrow-left" size="18" @click="$router.back()" />
      </template>
    </van-nav-bar>

    <van-tabbar v-model="active" v-if="tabBarShow" class="line">
      <van-tabbar-item replace to="/index">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="ShopCar" badge="3" :icon="active==1?shopCar.inactive:shopCar.active">购物车</van-tabbar-item>
      <van-tabbar-item replace to="mine" :icon="active==2?mine.active:mine.inactive">我的</van-tabbar-item>
    </van-tabbar>
    <div class="main">
      <slot></slot>
    </div>

  </div>
</template>

<script>
import bus from '@/utils/eventBus.js'

export default {
  // 定义属性
  data() {
    return {
      // active: 0,
      icon: {
        active: require('../assets/Icon/底部主导航图标48px/首页-选中.svg'),
        inactive: require('../assets/Icon/底部主导航图标48px/首页.svg')
      },
      shopCar: {
        active: require('@/assets/Icon/底部主导航图标48px/购物车.svg'),
        inactive: require('@/assets/Icon/底部主导航图标48px/购物车-选中.svg')
      },
      mine: {
        active: require('../assets/Icon/底部主导航图标48px/我的-选中.svg'),
        inactive: require('../assets/Icon/底部主导航图标48px/我的.svg')
      }
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    flag: {
      type: Boolean,
      default: false
    },
    navBarShow: {
      type: Boolean,
      default: true
    },
    tabBarShow: {
      type: Boolean,
      default: true
    },
    active: {
      type: Number,
      default: 0
    }
  },
  created() {
    bus.$on('share', val => {
      this.flag = val
    })
  }
}
</script>

<style lang='less' scoped>
.line {
  border: 1px solid #dddddd;
}
.van-nav-bar ~ .main {
  padding-top: 88px;
}
.van-tabbar + .main {
  padding-bottom: 98px;
}
</style>